<template>
    <text class="iconfont" :class="iconClass" :style="style">{{ iconUnicode }}</text>
</template>

<script>
/**
 * 图标组件
 * 使用方式：
 * 1. 通过name使用：<Icon name="fanhui" />
 * 2. 通过unicode使用：<Icon unicode="e61e" />
 */
export default {
    name: 'Icon',
    props: {
        // 图标名称
        name: {
            type: String,
            default: ''
        },
        // 图标unicode
        unicode: {
            type: String,
            default: ''
        },
        // 尺寸，单位rpx
        size: {
            type: [Number, String],
            default: 32
        },
        // 颜色
        color: {
            type: String,
            default: ''
        },
        // 自定义类名
        customClass: {
            type: String,
            default: ''
        }
    },
    computed: {
        // 图标unicode编码
        iconUnicode() {
            if (this.unicode) {
                return String.fromCharCode(parseInt('0x' + this.unicode));
            }

            // 图标映射表
            const iconMap = {
                fanhui: 'e61e',    // 返回
                plus: 'e6d9',      // 加号
                add: 'e6d9',       // 加号(别名)
                edit: 'e602',      // 编辑
                delete: 'e609',    // 删除
                location: 'e611',  // 定位
                arrow: 'e65e',     // 箭头
                check: 'e605',     // 对勾
                close: 'e64d',     // 关闭
                search: 'e60c'     // 搜索
            };

            const code = iconMap[this.name];
            if (code) {
                return String.fromCharCode(parseInt('0x' + code));
            }

            return '';
        },

        // 图标类名
        iconClass() {
            const classList = [];

            if (this.customClass) {
                classList.push(this.customClass);
            }

            if (this.name) {
                classList.push(`icon-${this.name}`);
            }

            return classList.join(' ');
        },

        // 样式对象
        style() {
            const style = {};

            if (this.size) {
                // 若是数字，自动添加rpx单位
                if (typeof this.size === 'number' || /^\d+$/.test(this.size)) {
                    style.fontSize = `${this.size}rpx`;
                } else {
                    style.fontSize = this.size;
                }
            }

            if (this.color) {
                style.color = this.color;
            }

            return style;
        }
    }
};
</script>

<style>
/* 组件样式在App.vue中全局引入 */
</style>